<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>12306spy</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="/web/layui/css/layui.css" rel="stylesheet" />
  </head>
  <body>
    <div class="layui-progress" style="margin: 15px 0 30px">
      <div class="layui-progress-bar" lay-percent="100%"></div>
    </div>

    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">出发站</label>
        <div class="layui-input-block">
          <input
            id="station_start"
            type="text"
            name="station_start"
            lay-verify="title"
            autocomplete="off"
            lay-verify="required"
            placeholder="赣榆"
            value=""
            onchange="setStartToCache()"
            class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">目标站</label>
        <div class="layui-input-block">
          <input
            id="station_end"
            name="station_end"
            placeholder="常州"
            value=""
            autocomplete="off"
            lay-verify="required"
            onchange="setEndToCache()"
            class="layui-input" />
        </div>
      </div>
      <!-- 出发日期, 使用时间选择器 -->
      <div class="layui-form-item">
        <label class="layui-form-label">验证日期</label>
        <div class="layui-input-inline layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-date"></i>
          </div>
          <input
            type="text"
            name="date"
            id="date"
            placeholder="yyyy-MM-dd"
            autocomplete="off"
            onchange="setDateToCache()"
            class="layui-input" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">车次</label>
        <!-- 下拉菜单,通过query_trains接口查询 -->
        <div class="layui-input-block">
          <input
            id="filter_train_name"
            name="filter_train_name"
            placeholder="选择指定车次,否则查询所有车次直达车票"
            lay-verify=""
            autocomplete="off"
            lay-search
            onchange="setTrainToCache()"
            class="layui-input" />
          <!-- <select name="filter_train_name" id="train-search-more">
            <option value="">请选择</option>
          </select> -->
        </div>
      </div>

      <!-- <div class="layui-form-item">
        <label class="layui-form-label">test</label>
        <div class="layui-input-block">
          <input
            name="is_test"
            placeholder="true"
            value="True"
            lay-verify="required"
            autocomplete="off"
            class="layui-input" />
        </div>
      </div> -->

      <!-- 提交 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button
            type="submit"
            class="layui-btn"
            lay-submit
            id="ID-btn-submit"
            lay-filter="demo-val">
            提交
          </button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          <button
            type="button"
            class="layui-btn layui-btn-primary"
            id="ID-btn-clean-result">
            清空结果
          </button>
        </div>
      </div>
    </form>

    <!-- 换行 -->
    <hr />

    <!-- 增加一个10列的表格 -->
    <p id="ID-table-title"></p>
    <table class="layui-table" id="ID-table-demo-init"></table>

    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="/web/layui/layui.js"></script>
    <script>
      layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var dropdown = layui.dropdown;

        layui.use("laydate", function () {
          var laydate = layui.laydate;
          // 渲染
          laydate.render({
            elem: "#date",
            format: "yyyy-MM-dd", // 设置日期格式
            value: new Date(), // 设置默认日期为今天
            done: function (value, date, endDate) {
              console.log("date change", value, date, endDate);
              setDateToCache();
            },
          });
        });

        // 绑定 ID-btn-clean result 的点击时间
        $("#ID-btn-clean-result").on("click", function () {
          layui.use(["table"], function () {
            var table = layui.table;

            // 假设你的表格ID是'ID-table-demo-init'
            // 重新加载表格，使用空数据
            table.reload("ID-table-demo-init", {
              data: [], // 使用空数组作为数据，这将清空表格
            });
          });
          $("#ID-table-title").text("查询结果 : ");
        });

        // 提交事件
        form.on("submit(demo-val)", function (data) {
          var field = data.field; // 获取表单字段值
          // 显示填写结果，仅作演示用
          // layer.alert(JSON.stringify(field), {
          //   title: "当前填写的字段值",
          // });
          // 在页面上增加一个loading的提示框
          var loading = layer.load(0, {
            shade: false,
          });
          var table = layui.table;
          // 清空之前的表格
          table.reload("ID-table-demo-init", {
            data: [], // 使用空数组作为数据，这将清空表格
          });
          let query_start_time = new Date().getTime();
          // 修改当前的url为新的url
          let new_url =
            "?station_start=" +
            field.station_start +
            "&station_end=" +
            field.station_end +
            "&date=" +
            field.date +
            "&filter_train_name=" +
            field.filter_train_name;
          console.log("new_url=", new_url);
          console.log("field=", field);
          window.history.pushState({}, 0, new_url);

          // 发送请求
          $.get("/query_any_seat", field, function (d) {
            layer.close(loading);
            let query_end_time = new Date().getTime();
            if (d.status == "success") {
              trains_arr = d.data;
              if (trains_arr.length == 0) {
                layer.alert("查询错误: " + d.data, {
                  title: "提示",
                });
                return false;
              }
              train_index_0 = trains_arr[0];
              // train_index_0的key作为表头
              var cols = [{ type: "numbers" }];
              for (let __key in train_index_0) {
                let key = __key;
                if (key.indexOf("链接") > 0) {
                  // link渲染
                  cols.push({
                    field: key,
                    title: key,
                    templet: function (d) {
                      return (
                        '<a href="' +
                        d[key] +
                        '" style="color : blue" target="_blank">点击直达</a>'
                      );
                    },
                  });
                } else if (key === "多余支出(元)" || key === "站票时间(min)") {
                  // link渲染
                  cols.push({
                    field: key,
                    title: key,
                    templet: function (d) {
                      console.log("多余渲染,k=", key, d);
                      return "<span style='color: red;'>" + d[key] + "</span>";
                    },
                  });
                } else {
                  let pk = key;
                  cols.push({ field: key, title: pk });
                }
              }
              // 修改 ID-table-title 的内容为当前查询的标题
              $("#ID-table-title").text(
                "查询时间 : " +
                  new Date().toLocaleString() +
                  ", 耗时: " +
                  (query_end_time - query_start_time) +
                  "ms"
              );
              var inst = table.render({
                elem: "#ID-table-demo-init",
                //标题栏, 显示当前时间
                // title: "查询结果 : ",
                cols: [cols],
                data: trains_arr,
                //skin: 'line', // 表格风格
                //even: true,
                page: false, // 是否显示分页
                limits: [5, 10, 15],
                limit: 5, // 每页默认显示的数量
              });
            } else {
              layer.alert("查询错误: " + d.data, {
                title: "提示",
              });
            }
          });

          return false; // 阻止默认 form 跳转
        });
      });

      function setStartToCache() {
        var start = document.getElementById("station_start").value;
        localStorage.setItem("station_start", start);
        console.log("setStartToCache", start);
      }

      function setEndToCache() {
        var end = document.getElementById("station_end").value;
        localStorage.setItem("station_end", end);
        console.log("setEndToCache", end);
      }

      function setDateToCache() {
        var date = document.getElementById("date").value;
        localStorage.setItem("date", date);
        console.log("setDateToCache", date);
      }

      function setTrainToCache() {
        var train = document.getElementById("filter_train_name").value;
        localStorage.setItem("filter_train_name", train);
        console.log("setTrainToCache", train);
      }

      // 在页面加载时，从缓存中获取值
      window.onload = function () {
        // 首先从url里面提取参数, 如果有的话,使用url中的参数
        var url = window.location.href;
        var start = url.match(/station_start=([^&]*)/);
        var end = url.match(/station_end=([^&]*)/);
        var date = url.match(/date=([^&]*)/);
        var train = url.match(/filter_train_name=([^&]*)/);
        var auto_query = url.match(/auto_query=([^&]*)/);

        var cachedStart = localStorage.getItem("station_start");
        var cachedEnd = localStorage.getItem("station_end");
        var cachedDate = localStorage.getItem("date");
        var cachedTrain = localStorage.getItem("filter_train_name");

        console.log(
          "start=",
          start,
          "end=",
          end,
          "date=",
          date,
          "train=",
          train
        );

        if (start) {
          document.getElementById("station_start").value = decodeURIComponent(
            start[1]
          );
        } else if (cachedStart) {
          document.getElementById("station_start").value = cachedStart;
        }
        if (end) {
          document.getElementById("station_end").value = decodeURIComponent(
            end[1]
          );
        } else if (cachedEnd) {
          document.getElementById("station_end").value = cachedEnd;
        }
        if (date) {
          document.getElementById("date").value = date[1];
        } else if (cachedDate) {
          document.getElementById("date").value = cachedDate;
        }
        if (train) {
          document.getElementById("filter_train_name").value = train[1];
        } else if (cachedTrain) {
          document.getElementById("filter_train_name").value = cachedTrain;
        }
        if (auto_query != null && auto_query[1] === "1") {
          console.log("auto_query=", auto_query);
          document.getElementById("ID-btn-submit").click();
        }
      };
    </script>
  </body>
</html>
